import { FC, useState, useEffect } from 'react';
import { Space, Card, Table, Tag, Button } from 'antd';

interface ItemType {
  key: string;
  name: string;
  likes: string[];
  age: number;
  address: string;
}

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    // align: 'center',
    // 默认的render
    // render(text: string) {
    //   return <span style={{ color: 'red' }}>{text}</span>;
    // },
  },
  {
    title: '爱好',
    dataIndex: 'likes',
    render(text: string[]) {
      return (
        <Space>
          {text.map((item) => (
            <Tag key={item}>{item}</Tag>
          ))}
        </Space>
      );
    },
  },
  {
    title: '年龄',
    dataIndex: 'age',
    // sorter: (a: ItemType, b: ItemType) => a.age - b.age,
  },
  {
    title: '住址',
    dataIndex: 'address',
  },
  {
    title: '操作',
    // render有第二个参数是record,就是这一行的数据
    render(text: string, record: ItemType) {
      return (
        <>
          <Button danger onClick={() => remove(record)}>
            删除
          </Button>
        </>
      );
    },
  },
];

const remove = (record: ItemType) => {
  console.log(record);
};

const Index: FC = () => {
  const [dataSource, setDataSource] = useState<ItemType[]>([]);
  useEffect(() => {
    setTimeout(() => {
      setDataSource([
        {
          key: '1',
          name: '胡彦斌',
          likes: ['篮球', '唱歌'],
          age: 32,
          address: '西湖区湖底公园1号',
        },
        {
          key: '2',
          name: '胡彦祖',
          likes: ['跳舞', 'rap'],
          age: 42,
          address: '西湖区湖底公园1号',
        },
      ]);
    }, 500);
  }, []);

  return (
    <Space direction="vertical" style={{ display: 'flex' }}>
      <Card title="基础表格">
        <Table dataSource={dataSource} columns={columns} />
      </Card>
    </Space>
  );
};

export default Index;
